<template>
  <div class="myTable" ref="container">
    <el-table
      v-bind="$attrs"
      :height="tableHeight"
      v-if="tableHeight !== 0 || tableHeight"
    >
      <template v-for="(col, idx) of columns">
        <el-table-column
          :key="idx"
          v-bind="col"
          v-if="col.type === 'selection'"
        ></el-table-column>
        <el-table-column :key="idx" v-bind="col" v-else>
          <slot :name="col.prop" slot-scope="scope" v-bind="scope">{{
            scope.row[col.prop]
          }}</slot>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "myTable",
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    // auto 自动撑开高度  Number 自定义高度  值为false: 自适应高度
    // 'auto' , Number ,undefined
    height: {
      type: [Number, String],
      default: undefined
    }
  },
  data() {
    let tableHeight = this.height;
    if (this.height === "auto") tableHeight = undefined;
    if (this.height === undefined) tableHeight = 0;
    return {
      tableHeight
    };
  },
  mounted() {
    if (this.tableHeight === 0) {
      this.tableHeight = this.$refs.container.offsetHeight;
    }
  }
};
</script>
<style lang="scss" scoped>
.myTable {
  flex-grow: 1;
  /deep/.el-table__body-wrapper {
    overflow-y: auto !important;
  }
}
</style>
